<template>
  <div
    :class="['flex', direction]"
    :style="{
      alignItems: align,
      justifyContent: justify,
      flexWrap: wrap,
      margin,
      ...style,
    }"
  >
    <slot />
  </div>
</template>

<script lang="ts" setup>
interface Props {
  style?: any;
  direction?: "column" | "row";
  margin?: string;
  align?: "center" | "flex-end" | "flex-start";
  justify?:
    | "center"
    | "flex-end"
    | "flex-start"
    | "space-between"
    | "space-around"
    | "space-evenly";
  wrap?: "wrap" | "nowrap" | "wrap-reverse";
}
withDefaults(defineProps<Props>(), {
  align: "center",
  justify: "center",
  margin: "",
});
</script>

<style lang="scss" scoped>
.flex {
  display: flex;

  &.column {
    flex-direction: column;
  }

  &.row {
    flex-direction: row;
  }
}
</style>
